#Vue JS landing template | Explore Tumblr posts and blogs

holytheoristtastemaker · 5 years ago

Link

React UI Framework (also known as React UI Library or React UI Kit) is a collection of pre-defined and built-in React UI components with a certain design system.

It helps developers to create a React application faster and easier. React UI library is similar but not the same with the React admin templates for Webapp that I discussed before.

They both ease the work of the developer, but they have different scope. A React UI Kit can be used to develop any kind of application, and its customization usually easier.

On the other side, React templates are usually themed for a certain type of application. It can be an admin template, landing page template, or e-commerce template.

When should you use a React UI Framework?

Just because it looks cool to use a React UI framework doesn't mean you have to always use it every time you develop a project.

Using a React UI Library will be best if you're in this condition:

You don't have much time to develop your React project.

There is no fixed design for your app, so you should design your own app but you don't want to spend much time on styling.

You like the design system of a React UI Library and want to adopt it into your app with a little or no customization.

Using a React UI Framework is not recommended if you have a fixed design for your app and you know that you will need a lot of customization. A CSS Framework like Tailwind will be the best for that case.

However, if you still want to use a React UI Framework even when you know there will be some customization, I would suggest that you use its CSS Framework version.

Some of React UI Libraries like Reactstrap and Semantic UI are built based on existing CSS frameworks.

In my experience, customizing a CSS framework is easier than customizing a React UI framework. It's because a CSS framework only affects components based on a class, while components of a React UI framework are predefined as React components with their own props.

What Are the Best React UI Frameworks / Libraries 2020?

There are a lot of React UI libraries out there. But, you only need the best of them to use it on your project.

Here, i collate the best and most popular UI libraries for React.js. Just choose one that suits your project.

1. Material-UI

Material UI is the most popular React UI Framework with a material design style. It provides a lot of React components for faster and easier web development.

You can build your own design system, or start with Material Design.

Material-UI has been widely used by React developers to adopt the Material design to their app. It is the best framework to use if you want to create a Material Design app easily.

In fact, there are some react templates that built on top of this framework such as MaterialPro and Material Admin.

Go to Material-UI site

2. React Bootstrap & Reactstrap

As you might know, Bootstrap is the most popular CSS framework widely used by Front-end developers.

However, Bootstrap is dependent on Jquery. So, if you want to use Bootstrap components in your react project, you should also import jquery and bootstrap js files, which is not a best practice.

React Bootstrap and Reactstrap come to solve this problem. They are 2 different React UI libraries, but they are based on the popular Bootstrap framework.

They adopt every component in the original Bootstrap framework as a React component. So, you don't have to import Jquery and Bootstrap js files to your project.

Choose one of them if you want to use Bootstrap components in your React project!

Go to React Bootstrap site Go to Reactstrap site

3. Ant Design

Ant Design is the world's second most popular React UI framework with a design system for enterprise-level products.

It is an open-source React UI library with 62k+ stars & 23k+ forks on Github that still open for contribution. It has a sleek design, a lot of UI components, and very well documented.

Go to Ant Design site

4. Semantic UI React

Originally, Semantic-UI is a UI framework designed for theming, like Bootstrap. Now, it has integrations with popular javascript frameworks: React, Angular, Meteor, Ember.

Semantic-UI has 50+ UI elements, 3000+ CSS variables and 3 levels of variable inheritance. It also use Em unit for responsive design and flexbox friendly.

When this post was written, Semantic-UI has more than 4.8k stars and 5k forks on Github. So, it quite popular and widely used by Frontend developers.

Go to Semantic UI site

5. React Desktop

As the name suggests, React Desktop is a React UI library that aims to bring native experience to the web, featuring many macOS Sierra and Windows 10 components.

React Desktop is a great choice to create a cross-platform application that work on desktop and web. It also works perfectly NW.js and Electron.js, but can be used in any JavaScript-powered project.

With desktop-like UI kit, you can create a cross-platform react application faster and easier.

Go to React Desktop site

6. Elemental UI

Elemental UI is a React UI kit with high quality and modular set of UI scaffolding components.

It aims to to create a set of functional and unopinionated components that are useful on their own or together, with an unobtrusive default style and flexible theme capabilities.

Currently, Elemental UI has 4.3k+ stars and 240+ forks on Github.

Go to Elemental UI site

7. Atlaskit

Atlaskit is Atlassian's Official UI library that built with Atlassian Design Guidelines. It has very rich UI components that a web application needs.

The best thing about Atlaskit is its modularity. You don't have to import all Atlaskit library to use its component. Just choose a package that very well documented here, and import it to your project.

Go to Atlaskit site

8. Grommet

Grommet is a responsive and mobile-first React UI kit built for Webapps with easy to use components library. It provides accessibility, modularity, responsiveness, and theming in a tidy package.

Grommet can be implemented easily both for a new project and an existing project. You can use the new app starter kit or existing app starter kit to implement Grommet on your project.

Some fine companies like Netflix, Uber, Samsung, Github, etc are using Grommet for their project. So, you don't have to worry about its quality.

Go to Grommet site

9. Carbon Design System

Carbon is an open-source design system for digital products and experiences developed by IBM with its design language.

The Carbon design system aims to improve UI consistency and quality, making the development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

It is built in React first, but it also supports core parts of the system in vanilla JS, Angular, and Vue.

Go to Carbon design system site

10. PrimeReact

PrimeReact is an open-source React UI library with a collection of 70+ UI components. It developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.

It is a complete UI framework for React that provides various input components, buttons, panel, data view & list, charts, etc.

0 notes

arksstech · 5 years ago

Text

Introducing Alpine.js: A Tiny JavaScript Framework | ArkssTech

Introducing Alpine.js: A Tiny JavaScript Framework Like most developers, I have a bad tendency to over-complicate my workflow, especially if there’s some new hotness on the horizon. Why use CSS when you can use CSS-in-JS? Why use Grunt when you can use Gulp? Why use Gulp when you can use Webpack? Why use a traditional CMS when you can go headless? Every so often though, the new-hotness makes life simpler. Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript. In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you. Throughout the article, I refer to Vue.js, but don’t worry if you have no experience of Vue — that is not required. In fact, part of what makes Alpine.js great is that you barely need to know any JavaScript at all. Now, let’s get started. What Is Alpine.js? According to project author Caleb Porzio: “Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.” Let’s unpack that a bit. Let’s consider a basic UI pattern like Tabs. Our ultimate goal is that when a user clicks on a tab, the tab contents displays. If we come from a PHP background, we could easily achieve this server side. But the page refresh on every tab click isn’t very ‘reactive’. To create a better experience over the years, developers have reached for jQuery and/or Bootstrap. In that situation, we create an event listener on the tab, and when a user clicks, the event fires and we tell the browser what to do. See the Pen Showing / hiding with jQuery by Phil on CodePen. See the Pen Showing / hiding with jQuery by Phil on CodePen. That works. But this style of coding where we tell the browser exactly what to do (imperative coding) quickly gets us in a mess. Imagine if we wanted to disable the button after it has been clicked, or wanted to change the background color of the page. We’d quickly get into some serious spaghetti code. Developers have solved this issue by reaching for frameworks like Vue, Angular and React. These frameworks allow us to write cleaner code by utilizing the virtual DOM: a kind of mirror of the UI stored in the browser memory. The result is that when you ‘hide’ a DOM element (like a tab) in one of these frameworks; it doesn’t add a display:none; style attribute, but instead it literally disappears from the ‘real’ DOM. This allows us to write more declarative code that is cleaner and easier to read. But this is at a cost. Typically, the bundle size of these frameworks is large and for those coming from a jQuery background, the learning curve feels incredibly steep. Especially when all you want to do is toggle tabs! And that is where Alpine.js steps in. WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! Like Vue and React, Alpine.js allows us to write declarative code but it uses the “real” DOM; amending the contents and attributes of the same nodes that you and I might edit when we crack open a text editor or dev-tools. As a result, you can lose the filesize, wizardry and cognitive-load of larger framework but retain the declarative programming methodology. And you get this with no bundler, no build process and no script tag. Just load 6kb of Alpine.js and you’re away! Alpine.js JQuery Vue.js React + React DOM Coding style Declarative Imperative Declarative Declarative Requires bundler No No No Yes Filesize (GZipped, minified) 6.4kb 30kb 32kb 5kb + 36kb Dev-Tools No No Yes Yes WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! When Should I Reach For Alpine? For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be: Showing and hiding DOM nodes under certain conditions, Binding user input, Listening for events and altering the UI accordingly, Appending classes. You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day. When Should I Look Elsewhere? If you’re fetching data, or need to carry out additional functions like validation or storing data, you should probably look elsewhere. Larger frameworks also come with dev-tools which can be invaluable when building larger UIs. From jQuery To Vue To Alpine Two years ago, Sarah Drasner posted an article on Smashing Magazine, “Replacing jQuery With Vue.js: No Build Step Necessary,” about how Vue could replace jQuery for many projects. That article started me on a journey which led me to use Vue almost every time I build a user interface. Today, we are going to recreate some of her examples with Alpine, which should illustrate its advantages over both jQuery and Vue in certain use cases. Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples. Getting Started Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go. The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required: ... Capturing User Inputs x-model allow us to keep any input element in sync with the values set using x-data. In the following example, we set the name value to an empty string (within the form tag). Using x-model, we bind this value to the input field. By using x-text, we inject the value into the innerText of the paragraph element. This highlights the key differences with Alpine.js and both jQuery and Vue.js. Updating the paragraph tag in jQuery would require us to listen for specific events (keyup?), explicitly identify the node we wish to update and the changes we wish to make. Alpine’s syntax on the other hand, just specifies what should happen. This is what is meant by declarative programming. Updating the paragraph in Vue while simple, would require a new script tag: new Vue({ el: '#app', data: { name: '' } }); While this might not seem like the end of the world, it highlights the first major gain with Alpine. There is no context-switching. Everything is done right there in the HTML — no need for any additional JavaScript. Click Events, Boolean Attributes And Toggling Classes Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events). In the following example, we instantiate a new component using x-data, and set the default value of show to be false. When the button is clicked, we toggle the value of show. When this value is true, we instruct Alpine to append the aria-expanded attribute. x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show). WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! Hiding And Showing The syntax showing and hiding is almost identical to Vue. This will set a given DOM node to display:none. If you need to remove a DOM element completely, x-if can be used. However, because Alpine.js doesn’t use the Virtual DOM, x-if can only be used on a (tag that wraps the element you wish to hide). Magic Properties In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js. $el fetches the root component (the thing with the x-data attribute); $refs allows you to grab a DOM element; $nextTick ensures expressions are only executed once Alpine has done its thing; $event can be used to capture a nature browser event. Let’s Build Something Useful It’s time to build something for the real world. In the interests of brevity I’m going to use Bootstrap for styles, but use Alpine.js for all the JavaScript. The page we’re building is a simple landing page with a contact form displayed inside a modal that submits to some form handler and displays a nice success message. Just the sort of thing a client might ask for and expect pronto!

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview) Note: You can view the original markup here. WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! To make this work, we could add jQuery and Bootstrap.js, but that is quite a bit of overhead for not a lot of functionality. We could probably write it in Vanilla JS, but who wants to do that? Let’s make it work with Alpine.js instead. First, let’s set a scope and some initial values: Now, let’s make our button set the showModal value to true: Get in touch When showModal is true, we need to display the modal and add some classes: Let’s bind the input values to Alpine: And disable the ‘Submit’ button, until those values are set: Submit Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done: Submit And that’s about it! Just Enough JavaScript When building websites, I’m increasingly trying to ask myself what would be “just enough JavaScript”? When building a sophisticated web application, that might well be React. But when building a marketing site, or something similar, Alpine.js feels like enough. (And even if it’s not, given the similar syntax, switching to Vue.js takes no time at all). It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny ( There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github. WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! Read the full article

#bestbrowsersforwebdesign #designsystems #webdesignbrowsers #webdesigncomponents #webdesigntools #webdesignworkflow

0 notes

bobecardinal · 5 years ago

Text

Nonid - Vue Nuxt SEO and Software Landing Page Template

Nonid – Vue Nuxt SEO and Software Landing Page Template

Live Preview Buy Now Screenshots

Author: LayerdropsPrice: $14

Nonid is a multi-concept SEO, Sofware, SaaS, Mobile app, Startup & Marketing landing page Vue Nuxt Template. It is build with Vue Js, Nuxt Js. Template is very easy to customize and fully responsive. It is best for your mobile app landing pages or businesses

Note:

This is a Vue Nuxt Js Template. It will not work with the…

View On WordPress

0 notes

riichardwilson · 5 years ago

Text

Introducing Alpine.js: A Tiny JavaScript Framework

About The Author

Phil Smith is a freelance developer based in Brighton, UK. His agency, amillionmonkeys partner with designers, entrepreneurs and agencies to build websites and … More about Phil …

Ever built a website and reached for jQuery, Bootstrap, Vue.js or React to acheive some basic user interaction? Alpine.js is a fraction of the size of these frameworks because it involves no build steps and provides all of the tools you need to build a basic user interface.

Like most developers, I have a bad tendency to over-complicate my workflow, especially if there’s some new hotness on the horizon. Why use CSS when you can use CSS-in-JS? Why use Grunt when you can use Gulp? Why use Gulp when you can use Webpack? Why use a traditional CMS when you can go headless? Every so often though, the new-hotness makes life simpler.

Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript.

In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you.

Throughout the article, I refer to Vue.js, but don’t worry if you have no experience of Vue — that is not required. In fact, part of what makes Alpine.js great is that you barely need to know any JavaScript at all.

Now, let’s get started.

What Is Alpine.js?

According to project author Caleb Porzio:

“Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.”

Let’s unpack that a bit.

Let’s consider a basic UI pattern like Tabs. Our ultimate goal is that when a user clicks on a tab, the tab contents displays. If we come from a PHP background, we could easily achieve this server side. But the page refresh on every tab click isn’t very ‘reactive’.

To create a better experience over the years, developers have reached for jQuery and/or Bootstrap. In that situation, we create an event listener on the tab, and when a user clicks, the event fires and we tell the browser what to do.

See the Pen Showing / hiding with jQuery by Phil on CodePen.

That works. But this style of coding where we tell the browser exactly what to do (imperative coding) quickly gets us in a mess. Imagine if we wanted to disable the button after it has been clicked, or wanted to change the background color of the page. We’d quickly get into some serious spaghetti code.

Developers have solved this issue by reaching for frameworks like Vue, Angular and React. These frameworks allow us to write cleaner code by utilizing the virtual DOM: a kind of mirror of the UI stored in the browser memory. The result is that when you ‘hide’ a DOM element (like a tab) in one of these frameworks; it doesn’t add a display:none; style attribute, but instead it literally disappears from the ‘real’ DOM.

This allows us to write more declarative code that is cleaner and easier to read. But this is at a cost. Typically, the bundle size of these frameworks is large and for those coming from a jQuery background, the learning curve feels incredibly steep. Especially when all you want to do is toggle tabs! And that is where Alpine.js steps in.

Like Vue and React, Alpine.js allows us to write declarative code but it uses the “real” DOM; amending the contents and attributes of the same nodes that you and I might edit when we crack open a text editor or dev-tools. As a result, you can lose the filesize, wizardry and cognitive-load of larger framework but retain the declarative programming methodology. And you get this with no bundler, no build process and no script tag. Just load 6kb of Alpine.js and you’re away!

Alpine.js JQuery Vue.js React + React DOM Coding style Declarative Imperative Declarative Declarative Requires bundler No No No Yes Filesize (GZipped, minified) 6.4kb 30kb 32kb 5kb + 36kb Dev-Tools No No Yes Yes

When Should I Reach For Alpine?

For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be:

Showing and hiding DOM nodes under certain conditions,

Binding user input,

Listening for events and altering the UI accordingly,

Appending classes.

You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day.

When Should I Look Elsewhere?

If you’re fetching data, or need to carry out additional functions like validation or storing data, you should probably look elsewhere. Larger frameworks also come with dev-tools which can be invaluable when building larger UIs.

From jQuery To Vue To Alpine

Two years ago, Sarah Drasner posted an article on Smashing Magazine, “Replacing jQuery With Vue.js: No Build Step Necessary,” about how Vue could replace jQuery for many projects. That article started me on a journey which led me to use Vue almost every time I build a user interface. Today, we are going to recreate some of her examples with Alpine, which should illustrate its advantages over both jQuery and Vue in certain use cases.

Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples.

Getting Started

Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go.

The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required:

Capturing User Inputs

x-model allow us to keep any input element in sync with the values set using x-data. In the following example, we set the name value to an empty string (within the form tag). Using x-model, we bind this value to the input field. By using x-text, we inject the value into the innerText of the paragraph element.

See the Pen Capturing user input with Alpine.js by Phil on CodePen.

This highlights the key differences with Alpine.js and both jQuery and Vue.js.

Updating the paragraph tag in jQuery would require us to listen for specific events (keyup?), explicitly identify the node we wish to update and the changes we wish to make. Alpine’s syntax on the other hand, just specifies what should happen. This is what is meant by declarative programming.

Updating the paragraph in Vue while simple, would require a new script tag:

new Vue({ el: '#app', data: { name: '' } });

While this might not seem like the end of the world, it highlights the first major gain with Alpine. There is no context-switching. Everything is done right there in the HTML — no need for any additional JavaScript.

Click Events, Boolean Attributes And Toggling Classes

Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events).

In the following example, we instantiate a new component using x-data, and set the default value of show to be false. When the button is clicked, we toggle the value of show. When this value is true, we instruct Alpine to append the aria-expanded attribute.

x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show).

See the Pen Click Events, Boolean Attributes and Toggling Classes with Alpine.js by Phil on CodePen.

Hiding And Showing

The syntax showing and hiding is almost identical to Vue.

See the Pen Showing / hiding with Alpine.js by Phil on CodePen.

This will set a given DOM node to display:none. If you need to remove a DOM element completely, x-if can be used. However, because Alpine.js doesn’t use the Virtual DOM, x-if can only be used on a <template></template> (tag that wraps the element you wish to hide).

Magic Properties

In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js.

$el fetches the root component (the thing with the x-data attribute);

$refs allows you to grab a DOM element;

$nextTick ensures expressions are only executed once Alpine has done its thing;

$event can be used to capture a nature browser event.

See the Pen Magic Properties by Phil on CodePen.

Let’s Build Something Useful

It’s time to build something for the real world. In the interests of brevity I’m going to use Bootstrap for styles, but use Alpine.js for all the JavaScript. The page we’re building is a simple landing page with a contact form displayed inside a modal that submits to some form handler and displays a nice success message. Just the sort of thing a client might ask for and expect pronto!

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview)

Note: You can view the original markup here.

To make this work, we could add jQuery and Bootstrap.js, but that is quite a bit of overhead for not a lot of functionality. We could probably write it in Vanilla JS, but who wants to do that? Let’s make it work with Alpine.js instead.

First, let’s set a scope and some initial values:

Now, let’s make our button set the showModal value to true:

<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>

When showModal is true, we need to display the modal and add some classes:

Let’s bind the input values to Alpine:

And disable the ‘Submit’ button, until those values are set:

<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>

Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done:

<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>

And that’s about it!

See the Pen Something useful built with Alpine.js by Phil on CodePen.

Just Enough JavaScript

When building websites, I’m increasingly trying to ask myself what would be “just enough JavaScript”? When building a sophisticated web application, that might well be React. But when building a marketing agency site, or something similar, Alpine.js feels like enough. (And even if it’s not, given the similar syntax, switching to Vue.js takes no time at all).

It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny (< 6kb gzipped). And it means no more context switching between HTML and JavaScript files.

There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/introducing-alpine-js-a-tiny-javascript-framework/ source https://scpie.tumblr.com/post/611788754623086592

0 notes

laurelkrugerr · 5 years ago

Text

Introducing Alpine.js: A Tiny JavaScript Framework

About The Author

Phil Smith is a freelance developer based in Brighton, UK. His agency, amillionmonkeys partner with designers, entrepreneurs and agencies to build websites and … More about Phil …

Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript.

Now, let’s get started.

What Is Alpine.js?

According to project author Caleb Porzio:

“Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.”

Let’s unpack that a bit.

See the Pen Showing / hiding with jQuery by Phil on CodePen.

Alpine.jsJQueryVue.jsReact + React DOMCoding styleDeclarativeImperativeDeclarativeDeclarativeRequires bundlerNoNoNoYesFilesize (GZipped, minified)6.4kb30kb32kb5kb + 36kbDev-ToolsNoNoYesYes

When Should I Reach For Alpine?

For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be:

Showing and hiding DOM nodes under certain conditions,

Binding user input,

Listening for events and altering the UI accordingly,

Appending classes.

You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day.

When Should I Look Elsewhere?

From jQuery To Vue To Alpine

Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples.

Getting Started

Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go.

The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required:

Capturing User Inputs

See the Pen Capturing user input with Alpine.js by Phil on CodePen.

This highlights the key differences with Alpine.js and both jQuery and Vue.js.

Updating the paragraph in Vue while simple, would require a new script tag:

new Vue({ el: '#app', data: { name: '' } });

Click Events, Boolean Attributes And Toggling Classes

Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events).

x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show).

See the Pen Click Events, Boolean Attributes and Toggling Classes with Alpine.js by Phil on CodePen.

Hiding And Showing

The syntax showing and hiding is almost identical to Vue.

See the Pen Showing / hiding with Alpine.js by Phil on CodePen.

Magic Properties

In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js.

$el fetches the root component (the thing with the x-data attribute);

$refs allows you to grab a DOM element;

$nextTick ensures expressions are only executed once Alpine has done its thing;

$event can be used to capture a nature browser event.

See the Pen Magic Properties by Phil on CodePen.

Let’s Build Something Useful

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview)

Note: You can view the original markup here.

First, let’s set a scope and some initial values:

Now, let’s make our button set the showModal value to true:

<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>

When showModal is true, we need to display the modal and add some classes:

Let’s bind the input values to Alpine:

And disable the ‘Submit’ button, until those values are set:

<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>

Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done:

<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>

And that’s about it!

See the Pen Something useful built with Alpine.js by Phil on CodePen.

Just Enough JavaScript

It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny (< 6kb gzipped). And it means no more context switching between HTML and JavaScript files.

There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/introducing-alpine-js-a-tiny-javascript-framework/ source https://scpie1.blogspot.com/2020/03/introducing-alpinejs-tiny-javascript.html

0 notes

laravelvuejs · 5 years ago

Text

RATH - App Landing Onepage Vue Js Template

RATH – App Landing Onepage Vue Js Template

[ad_1]

RATH – Vue js App Landing Page Template. 5 Stunning Homepages are included in this template. You can use any template or mix content from different home pages for your website.

We have done a research and find out what an app landing and a responsive website needs both on business & marketing section.

You can use RATH for multipurpose Landing Page Template. Create your cutting-edge…

View On WordPress

#app #App Showcase #clean #onepage vuejs #rath vue #responsive #vue bootstrap #vue cli #vue js #vue landing #vue template #vuejs #vuejs template

0 notes

laravelreactjs · 4 years ago

Text

RATH - App Landing Onepage Vue Js Template

RATH – App Landing Onepage Vue Js Template

RATH – Vue js App Landing Page Template. 5 Stunning Homepages are included in this template. You can use any template or mix content from different home pages for your website. We have done a research and find out what an app landing and a responsive website needs both on business & marketing section. You can use RATH for multipurpose Landing Page Template. Create your cutting-edge website with…

View On WordPress

#app #App Showcase #clean #onepage vuejs #rath vue #reactjs #responsive #vue bootstrap #vue cli #vue js #vue landing #vue template #vuejs #vuejs template

0 notes

scpie · 5 years ago

Text

Introducing Alpine.js: A Tiny JavaScript Framework

About The Author

Phil Smith is a freelance developer based in Brighton, UK. His agency, amillionmonkeys partner with designers, entrepreneurs and agencies to build websites and … More about Phil …

Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript.

Now, let’s get started.

What Is Alpine.js?

According to project author Caleb Porzio:

“Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.”

Let’s unpack that a bit.

See the Pen Showing / hiding with jQuery by Phil on CodePen.

When Should I Reach For Alpine?

For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be:

Showing and hiding DOM nodes under certain conditions,

Binding user input,

Listening for events and altering the UI accordingly,

Appending classes.

You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day.

When Should I Look Elsewhere?

From jQuery To Vue To Alpine

Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples.

Getting Started

Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go.

The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required:

Capturing User Inputs

See the Pen Capturing user input with Alpine.js by Phil on CodePen.

This highlights the key differences with Alpine.js and both jQuery and Vue.js.

Updating the paragraph in Vue while simple, would require a new script tag:

new Vue({ el: '#app', data: { name: '' } });

Click Events, Boolean Attributes And Toggling Classes

Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events).

x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show).

See the Pen Click Events, Boolean Attributes and Toggling Classes with Alpine.js by Phil on CodePen.

Hiding And Showing

The syntax showing and hiding is almost identical to Vue.

See the Pen Showing / hiding with Alpine.js by Phil on CodePen.

Magic Properties

In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js.

$el fetches the root component (the thing with the x-data attribute);

$refs allows you to grab a DOM element;

$nextTick ensures expressions are only executed once Alpine has done its thing;

$event can be used to capture a nature browser event.

See the Pen Magic Properties by Phil on CodePen.

Let’s Build Something Useful

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview)

Note: You can view the original markup here.

First, let’s set a scope and some initial values:

Now, let’s make our button set the showModal value to true:

<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>

When showModal is true, we need to display the modal and add some classes:

Let’s bind the input values to Alpine:

And disable the ‘Submit’ button, until those values are set:

<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>

Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done:

<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>

And that’s about it!

See the Pen Something useful built with Alpine.js by Phil on CodePen.

Just Enough JavaScript

It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny (< 6kb gzipped). And it means no more context switching between HTML and JavaScript files.

There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/introducing-alpine-js-a-tiny-javascript-framework/

0 notes

adnetworkscript-blog · 7 years ago

Text

Chatloop - Vue JS App Landing Page (Software)

Chatloop Vue js App Landing Page Chatloop Vue Js Landing Page – This is App Landing Template. It is designed with Bootstrap 4.1.1 and clean & modern Look. Chatloop is a very good VueTemplate, which suites best for any kind of App landing page. Chatloop looks beautiful at any size, be... download link => Chatloop - Vue JS App Landing Page (Software)

0 notes

t-baba · 5 years ago

Photo

Which JS projects got the most GitHub stars in 2019?

#470 — January 10, 2020

Read on the Web

JavaScript Weekly

Snowpack: A 'Run Once' Dependency Builder/Modularizer — An interesting project (formerly known as pika/web) from the folks behind Pika. The idea is that you run Snowpack once after npm install and it prepares your dependencies as ES modules that can be loaded dynamically by the browser so you don’t need to rebundle on every code change you make. This isn’t good if you want to target old browsers, but for the 90% of cases, this could change your dev process.

Fred K. Schott

2019's JavaScript 'Rising Stars' — If you don’t like popularity contests, skip this one, but it’s the latest annual roundup of which JavaScript projects did well in terms of gaining GitHub stars in 2019. Vue took the top spot for the 4th year in a row, but the subcategories are more interesting.

Michael Rambeau and Sacha Greif

Get Best in Class Error Reporting for Your JavaScript Apps — Time is money. Software bugs waste both. Save time with Bugsnag. Automatically detect and diagnose errors impacting your users. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in minutes. Try it free.

Bugsnag sponsor

Dan Abramov on What JavaScript Is Made Up Of — Dan (of React core team and Redux fame) reflects on his mental model of what JavaScript is in terms of raw concepts.

Dan Abramov

How to Move a Project to TypeScript - At Your Own Pace — We’ve recently commented how 2019 seemed to be the year of many people ‘switching’ to TypeScript.. but if you’re intimidated, you might like this guide to moving an existing project in a gradual way.

Dominik Kundel

The State of Storybook at the End of 2019 — Storybook is a popular tool for developing and showcasing UI components (originally just for React, but now supporting Angular, Vue, and more). 2019 saw even more growth for Storybook’s ecosystem and community.

Michael Shilman

⚡️ Quick Releases

Ember 3.15

date-fns 2.9 — Modern date utility library.

Johnny Five 1.4.0 — Robotics and IoT framework.

Handlebars.js 4.7 — Classic templating library.

Pickr 1.5 — Responsive and hackable color picker.

💻 Jobs

Full-Stack or Front-End Engineer - Rails/React (Remote/NYC) — Got 2+ years of experience? Come help build the next iteration of our growing digital recovery platform centered providing alcohol abuse treatment.

TEMPEST

Find a Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

An Abbreviated History of JavaScript Package Managers — This post explains why npm, Yarn and pnpm were created and the problems they’ve set out to solve over time.

Matt Goldwater

Understanding Async/Await — A straightforward and easily accessible tutorial on using promises and how async and await can make the resulting code more straightforward.

Sarah Drasner

CFP for ForwardJS San Francisco and Ottawa now OPEN — Submit your proposal to speak at ForwardJS Ottawa (May 26-29) or San Francisco (July 20-24) Ticket sales begin Jan 15.

ForwardJS sponsor

Off Main Thread Architecture with Vuex — Inspired by Surma’s articles on using Web Workers to take work off of the main thread, Abdelrahman was inspired to see how this could help with Vue and Vuex.

Abdelrahman Awad

How To Create And Deploy an Angular Material App — This article will help you get started with a new Angular project from just a thought to deployment (on Netlify, in this case).

Shubham

Things I've Learnt Optimizing My Build Time — Things a developer has learnt implementing some build time optimization techniques at the company he works for.

Eldad Bercovici

Why I Avoid Nesting Closures — “A little tendency I have to reduce cognitive load for readers of my code.”

Kent C Dodds

A Basic Example of the Web Share API — The Web Share API enables native sharing (via other apps/social networks) on pages.

Dillion Megida

Breaking Chains with Pipelines in Modern JavaScript

Dan Shappir

Comparing the Different Types of Native JavaScript 'Popups' — window.confirm, window.onbeforeunload, etc.

Elliot Goldman

Top GitHub Best Practices for Developers - Expanded Guide — Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree.io sponsor

▶ Why GitHub Actions Is One Developer's New Favorite Programming Tool — While Github Actions is commonly associated with deployment and pipelines, it’s ultimately an engine for running JavaScript in the cloud, and that opens up some neat use cases as demonstrated here. 17 minutes.

Kristian Freeman

🔧 Code & Tools

Craft.js: A React Framework for Building Drag and Drop Page Editors — It’s a bold move to make the landing page for your project be a text editor itself, but I like it :-)

Prev Wong

Code to Graph: Visualize JavaScript Code as a Network Diagram — An interesting idea and fun to play with.

Vincent Lecrubier

Faster CI/CD for All Your Software Projects Using Buildkite

Buildkite sponsor

Mocha 7.0 Released: The Popular JavaScript Test Framework — Mocha has been a popular go-to test framework for both Node and the browser for years now. 7.0.0 isn’t a huge release but drops Node 6 support and makes enough changes and deprecations to warrant the version update.

Mocha

Postgres.js: A Fast, Full-Featured Postgres Client for Node — Claims to be the fastest even (at 2-10x faster than the popular pg module) but we’ll let you be the judge of that :-)

Rasmus Porsager

scalajs-react: React, but for Scala.JS — Feeling brave? Scala.js provides a way to build front-end apps using Scala (which is then compiled into JavaScript) and scalajs-react brings React into the mix too.

David Barri

😂 Last but not least..

The Size of a node_modules Folder When Installing The Top 100 Packages — We’ve all heard the jokes about the size of node_modules directories, but I found it neat that someone’s actually tracking this on an ongoing basis. And if you really want to clean up those folders, check out npkill.

Koen van Gilst

by via JavaScript Weekly https://ift.tt/30aVFPq

#Javascript Branding #Javascript Weekly

0 notes

listiqueblog · 7 years ago

Text

Customize Every Pixel: Custom Checkouts Now Available on BigCommerce

BigCommerce is excited to announce the achievement of a major platform milestone: Our Checkout SDK is now generally available.

What is the BigCommerce Checkout SDK?

The Checkout SDK is a JavaScript library that makes it easy to consume the new Checkout APIs.

The Checkout SDK is intended for partners, developers and brands who want to build a custom checkout front-end experience. It allows for developers to create their own UI to move a customer through the checkout process.

The SDK handles all the heavy-lifting such as:

Customer login

Getting shipping quotes

Submitting payment for an order

Beyond general availability of the Checkout SDK, BigCommerce is also proud to announce and showcase multiple customers using a customized checkout via the Checkout SDK and two BigCommerce partners who have built out ready-to-use customized checkout applications.

Examples of The BigCommerce Checkout SDK in Use

The BigCommerce SDK is already in use by a variety of BigCommerce customers. In addition, you can go through our open-source Cornerstone Theme demo store to see the Checkout SDK in use.

This is the Checkout SDK testing environment using BigCommerce’s open-source Cornerstone theme.

Let’s look at a few additional examples.

Yellow Pages

This custom checkout was built by Moustache Republic on the BigCommerce Checkout SDK as part of the Yellow Pages’ digital transformation.

It allows for various custom entries specific to Yellow’s use cases.

“Yellow is going through a complete digital transformation and bringing a whole new set of services online. Like most businesses their size, the company has a complex set of ecommerce requirements that can’t be solved by out-of-the-box solutions,” said Tony Hou, managing director at Moustache Republic.

“As a long-time BigCommerce partner, we knew the BigCommerce platform had the flexibility to accommodate both the customized single sign-on and checkout experiences Yellow desired, without requiring a huge investment. Features like Checkout SDK are just another way the platform allows agencies to customize a SaaS solution for unique business needs.”

Bohemian Traders

This custom checkout was built by Intuit Solutions on the BigCommerce Checkout SDK for Bohemian Traders.

Bohemian Traders was looking for a complete one-page checkout, where all fields are readily visible upon landing on the checkout.

“We worked with BigCommerce partner Intuit Solutions, which puts a skin over the BigCommerce one page checkout and rearranges all of the information,” says David Berlach, CEO of Bohemian Traders.

“Now, there are three columns on the checkout page. There is no scrolling at all. It’s clean and undistracting for the customers. Plus, we can brand it or include up-sells or cross-sells as needed. That’s been working very well.”

Kettlebell Kings

This custom checkout was built by Bolt using the Checkout SDK for Kettlebell Kings. Kettlebell Kings was looking to reduce the number of clicks to checkout for a variety of products.

Ready-to-use Customized Checkout Apps

Beyond customization for brands, agencies, developers and technology companies now have the ability to build a completely customized checkout on BigCommerce, and then market that solution as a replacement for the BigCommerce checkout on both the BigCommerce App Store and their own marketing material.

This is net new, recurring income opportunity for agencies, developers and technology companies.

Plus, this gives BigCommerce merchants even more control in their desired ecommerce checkout experience, along with the ease of use of a one-click install.

Here are two companies already building additional revenue with BigCommerce’s Checkout SDK.

Bolt

Bolt is a single, intelligent platform that replaces fragmented online shopping, payment, and fraud software. As one of BigCommerce’s preferred partners for checkout, Bolt brings a seamless checkout experience and zero fraud to online retailers, driving double-digit revenue lift.

“With BigCommerce’s Checkout SDK, BigCommerce merchants can now take advantage of Bolt Checkout without investing in additional developer hours, giving them access to Bolt’s hyper-optimized checkout interface and precision fraud detection out of the box,” said Kazuki Nishiura, head of integration engineering at Bolt.

“BigCommerce and Bolt have been working closely on this seamless integration, and we’re excited to bring our track record of 10-50 percent revenue lift to a growing number of retailers.”

According to Bolt, the benefits of their checkout solution including:

4 fewer clicks to checkout

8 fewer fields to fill out at checkout

35-90 seconds faster checkout than the average ecommerce checkout

10-50% revenue lift for online retailers.

Single-click checkout for returning customers

0 dev hours integration: Bolt does all the heavy-lifting for BigCommerce retailers

Industry-leading fraud detection, powered by machine learning and double-checked with human review

100% coverage of fraudulent chargebacks including full international risk coverage

Personalized customer support

BigCommerce customers can begin using Bolt’s checkout now.

Intuit Solutions

Intuit Solutions has long been an agency partner for BigCommerce. Now, they have repurposed their custom checkout development work into a net new app to increase the agency’s recurring revenue.

Bohemian Traders is only one of hundreds of BigCommerce merchants already using the solution.

BulkBookstore is another brand using Intuit Solutions’ One-Page Checkout.

According to Intuit Solutions, the benefits of their checkout include:

7-10% AVG Conversion Increase

45 Seconds Average Reduction In Checkout Time

No Downtime During Installation

Google Maps API Address Autofill

100% PCI Compliant and Secure

BigCommerce customers can begin using Intuit Solutions’ checkout now.

BigCommerce Checkout SDK FAQs

What can I do with the Checkout SDK?

The Checkout JS SDK provides methods for building a checkout page replacement rather than a way to make changes to the existing checkout page. Essentially, you are replacing the built-in Optimized One-Page Checkout with a totally new UI that you design and build yourself.

The SDK provides JavaScript methods for completing the necessary steps of checkout, like displaying and selecting shipping methods, and communicating that information back to the BigCommerce backend.

Here are a variety of customizations you can build:

Initialize payment and shipping providers that require client-side setup through a common interface. Below are some examples of these providers:

PayPal Express

Braintree

Stripe

Square

Amazon

Klarna

Provides a JavaScript interface for interacting with the web API.

Fetch and submit resources:

Cart

Order

Customer

Fetch available options:

Shipping addresses

Shipping countries

Shipping states

Billing addresses

Billing countries

Billing states

Shipping methods

Payment methods

It is important to note that the Checkout SDK does not allow you to change the underpinnings of the checkout. You must still conform to the model of the Checkout API underpinning the SDK to successfully complete a Checkout and create an order in BigCommerce.

The SDK does not allow you to implement custom payment, shipping, or tax calculation providers into the checkout. Instead, the configured providers for these services on a given store are expressed via our Checkout API.

Where can I get the Checkout SDK?

The Checkout SDK and associated documentation can be downloaded from the BigCommerce SDK Repo.

There, you can find documentation, installation instructions, and take a look at the code. The Checkout SDK is an open source project, so while BigCommerce actively maintains it, you can open a pull request if you’d like to contribute.

Do I have to build my custom checkout in React?

Nope! The library is vanilla JavaScript, so it’s framework-agnostic. You can work in React, Angular, Vue, or even just plain HTML and JavaScript–whichever frontend framework you prefer to build in.

How do I integrate my custom checkout into the template files?

The most common implementation will be to build a custom checkout directly into the checkout.html file, replacing the default }.

Anything else I should know?

The Checkout SDK is only supported with the Optimized One-Page Checkout control panel setting.

What if I need help?

Currently, support is provided based on your plan. Enterprise clients can reach out to their account manager. For other options on customizing the checkout see our developer documentation on the different ways of working with the checkout pages.

Commerce Without Compromise

BigCommerce is dedicated to building an ecommerce platform that allows our customers to build commerce experiences as they intend them. This means that we will continue to focus on building out our developer documentation, access to APIs, launch additional SDKs and more.

In today’s competitive retail environment, it is crucial that brands build customized end-to-end ecommerce experiences that are memorable, unique and effective for their specific audiences. It is our intention to remove any barriers that exist to using best-of-breed technologies, business models or data orchestration flows that force retailers into an opinionated ecommerce build out.

Here are additional BigCommerce product launches focused on knocking down those barriers:

BigCommerce WordPress Integration: Marrying Scalable Content and Commerce

BigCommerce Brings AMP to Sites Worldwide

Akamai Image Manager Now Available at No Cost to BigCommerce Customers

For more information on getting started with the Checkout SDK, please follow this link.

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

Customize Every Pixel: Custom Checkouts Now Available on BigCommerce published first on https://goshopmalaysia.tumblr.com

0 notes